<!--  -->
<template>
    <div>
<!--内容-->
<div class="m-container ">
    <div class="ui container m-pad-tb-big m-margin-tb-big m-opacity segment" style="height:445px;">
        <table class="ui celled striped table">
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center" v-for="(type,i) in pageInfo.list" :key="type.id" >
                <td>{{i+1}}</td>
                <td>{{type.name}}</td>
                <td>
                    <a class="ui mini teal basic button" @click="editType(type.id)">编辑</a>
                    <a class="ui mini red basic button"  @click="deleteType(type.id)">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="6">
                        <div class="ui pagination menu">
                            <a class="item" v-if="!pageInfo.isFirstPage" @click="getTypes(pageInfo.pageNum-1)">上一页</a>
                            <a class="item" v-if="!pageInfo.isLastPage" @click="getTypes(pageInfo.pageNum+1)">下一页</a>
                        </div>
                        <button class="ui  teal basic button right floated" @click="addType()"><i class="ui edit icon"></i>新增</button>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<div>
<br>
<br>
<br>
</div>


    </div>
</template>

<script>
export default {
    data () {
        return {
            pageInfo:"",
            pageNum:1
        };
    },
    methods:{  
        getTypes(pageNum){
            var _this = this
            _this.axios.get("/admin/getTypes",{
                params:{
                    pageNum:pageNum
                }
            })
            .then(res =>{
                _this.pageInfo = res.data.pageInfo
            }).catch(e =>{
                console.log(e)
            })
        },
        deleteType(id){
            if(confirm("确定要删除该分类吗？")){
                 var _this = this
                _this.axios.post("/admin/deleteType",{
                    id:id
                }).then(res =>{
                    if(res.data.status === 200){
                        //是否为该页最后一个
                        if(_this.pageInfo.total%5==1)
                            _this.pageNum-=1
                        _this.getTypes()
                    }
                    alert(res.data.msg)
                }).catch(e =>{
                    console.log(e)
                })
            }
        },
        editType(id){
            let arr = this.pageInfo.list
            let updateType = null
            for (let i = 0; i < arr.length; i++){
                if(arr[i].id==id){
                    updateType = arr[i];
                    break;
                }
            }
            if(updateType != null){
                this.$store.commit('setEditType',updateType)
                this.$router.push({path:"/admin/inputType"}) 
            }
            else{
                alert('修改失败，发生未知错误')
            }
        },
        addType(){
            let NewType = {id:0,name:""}
            this.$store.commit('setEditType',NewType)
            this.$router.push({path:"/admin/inputType"}) 
        }
    },
    created(){
        this.getTypes()
    },
}

</script>
<style lang='scss' scoped>
</style>